<template>
	<view class="background-fff paddinglr-30">
		<view class="list_inner_view flex-between">
			<view class="list_title">
				<text class="required" v-if="required">*</text>
				{{title}}
			</view>
			<view class="list_container">
				<slot name="content"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 列表中左右排列的组件
	 * @property {String} title 左侧label标签名
	 * @property {Slot} content Slot带入右侧实际的输入对象 
	 * @example <applist title="被保人姓名" >
			<view slot="content" class="">
				<input placeholder="请输入被保人姓名" type="text" v-model="info.insuredName" />
			</view>
		</applist>
	 */
	export default {
		data() {
			return {
				
			};
		},
		props:{
			title:{
				type:String,
				default:''
			},
			required:{
				type:Boolean,
				default:false
			},
		}
	}
</script>

<style scoped lang="scss">
	.list_inner_view{height: 80rpx;line-height: 80rpx;font-size: 28rpx;border-bottom: 1px solid #EDEEF0;}
	.list_title{ display: flex;align-items: center;color: #666;}
	.list_container {flex:1;text-align: right; display: flex; align-items: center; flex-direction: row-reverse;color:#111}
	.required{color: #F11818;}
</style>
